<template>
  <view class="dialogFooter">
    <view class="footer" v-if="type === 0">
      <view class="footer-cancel" @tap="cancel"> 取消</view>
      <view class="footer-sapce"></view>
      <view class="footer-submit" @tap="submit">确定 </view>
    </view>

    <view class="footer" v-if="type === 1">
      <view class="footer-oneSubmit"
        ><view @tap="submit">{{ subTitle }}</view></view
      >
    </view>
  </view>
</template>

<script setup lang="ts">
import { kkDialogFooterType } from "./enum";

defineProps({
  type: {
    type: Number,
    default: kkDialogFooterType.default,
  },
  subTitle: {
    type: String,
    default: "确定",
  },
});

const cancel = () => {
  emit("cancel");
};

const submit = () => {
  emit("submit");
};

const emit = defineEmits(["cancel", "submit"]);
</script>

<style lang="scss" scoped>
.dialogFooter {
  .footer {
    padding-top: 12rpx;
    display: flex;
    flex-direction: row;
    width: calc(100% - 48rpx);
    margin-left: 24rpx;
    margin-right: 24rpx;
    justify-content: center;
    padding-bottom: 36rpx;
    &-cancel {
      width: calc((100% - 64rpx) / 2);
      height: 72rpx;
      background: #f9e6df;
      border-radius: 36rpx;
      font-size: 28rpx;
      color: #ea6334;
      line-height: 72rpx;
      text-align: center;
    }

    &-sapce {
      width: 16rpx;
    }

    &-submit {
      width: calc((100% - 64rpx) / 2);
      height: 72rpx;
      background: #ea6334;
      border-radius: 36rpx;
      font-size: 28rpx;
      color: #ffffff;
      line-height: 72rpx;
      text-align: center;
    }
    &-oneSubmit {
      width: 258rpx;
      height: 72rpx;
      background: #ea6334;
      border-radius: 36rpx;
      font-size: 28rpx;
      line-height: 72rpx;
      color: #ffffff;
      text-align: center;
    }
  }

  :deep(.u-safe-area-inset-bottom) {
    height: 10px;
  }
}
</style>
